<template>
  <el-dialog title="新增员工" :visible="isShowDialog" @close="btnNo">
    <el-form ref="formAdd" label-width="120px" :model="formData" :rules="Rules">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="formData.username" placeholder="请输入姓名" style="width:70%" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="formData.mobile" placeholder="请输入手机" style="width:70%" />
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker v-model="formData.timeOfEntry" placeholder="请选择入职时间" style="width:70%" />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="formData.formOfEmployment" placeholder="请输入聘用形式" style="width:70%">
          <el-option v-for="item in EmployeeEnum.hireType" :key="item.id" :label="item.value" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item prop="workNumber" label="工号">
        <el-input v-model="formData.workNumber" placeholder="请输入工号" style="width:70%" />
      </el-form-item>
      <el-form-item prop="departmentName" label="部门">
        <el-input v-model="formData.departmentName" placeholder="请输入部门" style="width:70%" @focus="focusGetDepartments" />
        <el-tree
          v-if="showTree"
          v-loading="loading"
          :data="treeNode"
          :props="{label:'name'}"
          :default-expand-all="true"
          @node-click="selectNode"
        />
        <!-- node-click事件，节点被点击时的回调 点了这个树形结构，就会触发-->
      </el-form-item>
      <el-form-item prop="correctionTime" label="转正时间">
        <el-date-picker v-model="formData.correctionTime" placeholder="请选择转正时间" style="width:70%" />
      </el-form-item>
    </el-form>
    <!-- 底部 -->
    <!-- <template v-slot:footer> 作用是让俩按钮靠近底部 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="btnOk">确定</el-button>
          <el-button size="small" @click="btnNo">取消</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import EmployeeEnum from '@/api/constant/employees.js' // 引入员工的枚举对象
import { addEmployee } from '@/api/employess.js'
import { getDepartments } from '@/api/departments.js'
import { tranListToTreeData } from '@/utils/index.js' // 拿到将数组数据转化为树形数据的函数
export default {
  props: {
    isShowDialog: { // 谁调用我这个组件 传入isShowDialog控制dialog弹出层的visible属性 true：dialog弹层显示
      type: Boolean,
      default: false // 默认关闭
    }
  },
  data() {
    return {
      EmployeeEnum: EmployeeEnum, // 将引入的数据放入data，因为只有在data或者props或者计算属性中的数据，才能渲染到页面上
      formData: {
        username: '', // 用户名
        mobile: '', // 手机号码
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '', // 组织名称
        timeOfEntry: '', // 入职时间
        correctionTime: '' // 转正时间
      },
      Rules: {
        username: [{ required: true, message: '用户名必须写', trigger: 'blur' }, { min: 1, max: 4, message: '名字为1~4位', trigger: 'blur' }],
        mobile: [{ required: true, message: '手机号必须写', trigger: 'blur' }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],
        formOfEmployment: [{ required: true, message: '聘用形式必须写', trigger: 'blur' }],
        workNumber: [{ required: true, message: '工号必须写', trigger: 'blur' }],
        departmentName: [{ required: true, message: '部门名称必须写', trigger: 'change' }], // 此处的验证规则为change 因为el-input添加验证规则，选数据是在el-tree中，他们是俩个组件，选数据时就会触发验证，我们想要的是选完数据之后才去触发它
        timeOfEntry: [{ required: true, message: '入职时间必须写', trigger: 'blur' }]
      },
      treeNode: [],
      showTree: false, // 控制el-tree组件是否显示
      loading: false // 进度条效果
    }
  },
  methods: {
    async focusGetDepartments() {
      this.loading = true // 进度条效果 通过v-loading实现 作用：点击时显示进度条
      this.showTree = true // 作用：当没有点击聚焦的时候，树形组件会显示在“部门”下，但又没有数据，显示“noData”  很丑
      // 所以增加这个属性 通过v-if来控制el-tree的显示 只有点击聚焦了，才this.showTree = true 让el-tree组件显示
      const { depts } = await getDepartments() // 不需要传递参数 返回的数据中 depts数组是我们所需要的
      // 但是得到的depts不是树形的，所以不能正常显示在el-tree上 所以我们需要借助以前封装的用递归函数的方法将数组数据转化为树形数据
      // this.treeNode = depts
      this.treeNode = tranListToTreeData(depts, '') // 将数组数据转化为树形数据的函数 该方法需要传递两个参数
      // 第一个参数：需要转化为树形数据的数组  第二个参数：''
      // 转化成功后将他赋值给treeNode，再到el-tree树形组件通过:data和:props将数据展示出我们想要的效果
      this.loading = false // 点击后，并且拿到数据渲染完成后，关闭进度条效果
    },

    // el-tree树形组件的点击事件
    selectNode(data, value, node) { // 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 此处只需要第一个
      // console.log(data)
      this.formData.departmentName = data.name // 只需要将name属性显示在表单位置 因为这个el-input v-module了formData.departmentName
      // 这样一来就将选中的部门显示到了表格上，然后再关闭树形结构
      this.showTree = false
    },

    async btnOk() { // 新增员工 点击“确定”
      try {
        await this.$refs.formAdd.validate() // 手动验证表单规则
        await addEmployee(this.formData)
        //  调用接口函数 新增员工完成 重新获取员工信息 渲染页面 通过this.$emit()通知父组件 这里学一种新的写法
        // this.$parent 可以直接调用到父组件的实例 实际上就是父组件this
        // 组件放的位置的不同会导致包裹该组件的父级元素不同 所以谨慎使用
        this.$parent.getEmployeeInfo()
        // 关闭dialog弹层 其实也可以用this.parent 但换个update配合.sync修饰符写法也不错
        this.$emit('update:isShowDialog', false)
      } catch (err) {
        console.log(err)
      }
    },

    btnNo() { // 点击取消 关闭弹出、清空表单数据、移除表单校验
      this.$emit('update:isShowDialog', false)
      this.formData = {
        username: '', // 用户名
        mobile: '', // 手机号码
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '', // 组织名称
        timeOfEntry: '', // 入职时间
        correctionTime: '' // 转正时间
      }
      this.$refs.formAdd.resetFields() // 移除表单校验
    }
  }
}
</script>

<style>

</style>
